<!DOCTYPE html>
<html lang="en">

<head>
  <!-- !required meta tags -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>
  <!-- index main-mobile css -->
  <link rel="stylesheet" href="static/css/index/mainMobile.css" />
  <!-- index tablet css -->
  <link href="static/css/index/table.css" media="(min-width: 600px)" rel="stylesheet">
  <!-- index desktop css -->
  <link href="static/css/index/desktop.css" media="(min-width: 900px)" rel="stylesheet">
  <!-- icon font-awesome css -->
  <link rel="stylesheet" href="static/css/all.min.css" />
  <!-- common css -->
  <link rel="stylesheet" href="static/css/common.css" />
  <script src="static/js/anychart-base.min.js" type="text/javascript"></script>
</head>

<body>
  <div id="wrapper">
    <nav class="navbar-side sidebar">
      <div class="nav-container">
        <a class="navbar-brand" href="/">
          <div>
            <img src="static/img/icons/etas.png" style="margin-left: -70px; margin-top: 3px;">
          </div>
        </a>
        <hr class="sidebar-divider">
        <ul class="navbar-nav" id="sidebar-ul">
          <li class="nav-item">
            <a class="nav-link active" href="dashboard">
              <i class="fas fa-tachometer-alt"></i>
              <span style="margin-left: 5px;">Dashboard</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="images">
              <i class="fas fa-list"></i>
              <span style="margin-left: 5px;">Images</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="containers">
              <i class="fas fa-cloud"></i>
              <span style="margin-left: 5px;">Containers</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="devices">
              <i class="fas fa-car"></i>
              <span style="margin-left: 5px;">Devices</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <div id="content-wrapper">
      <!--!Navbar Top-->
      <div class="navbar-top d-flex" id="page-top">
        <div class="container-fluid d-flex">
          <button id="sidebarToggleTop" class="btn-link" type="button"><i class="fas fa-bars"></i></button>
          <form class="navbar-search d-flex">
            <div class="input-group ">
              <input class="nav-search" type="text" placeholder="Search for ...">
              <button class="btn btn-primary" type="button">
                <i class="fas fa-search"></i></button>
            </div>
          </form>
        </div>
        <ul class="navbar-nav-ul d-flex">
          <li class="nav-item">
            <a class="dropdown-toggle nav-link search-icon-nav" href="#"><i class="fas fa-search"></i></a>
          </li>

          
          <li class="nav-item notific-span">
            <a class="dropdown-toggle nav-link" href="#"><span>3+</span><i class="fas fa-bell fa-fw"></i></a>
          </li>
          <li class="nav-item notific-span">
            <a class="dropdown-toggle nav-link" href="#"><span class="badge bg-danger badge-counter">7</span><i
                class="fas fa-envelope fa-fw"></i></a>
          </li>
          <div class="topbar-divider"></div>
          <li class="nav-item avatar-n">
            <p><span class="avatar-text">SDVOS</span></p>
            <div class="avatar-nav"></div>
          </li>
        </ul>
      </div>
      <!--!Top Nav ends-->


      <!--!Index's Main contents start here-->
      <div class="index-content container-main">
        <div class="dashboard-header  d-flex justify-between">
          <!--!Dashboard header-->
          <h3>Dashboard</h3>
        </div>
        <!--!Indo cards-->
        <div class="income-inf-row row">
          <!--!Card no1-->
          <div class="col-income">
            <div class="card">
              <div class="card-body">
                <div class="card-text">
                  <div class="card-span"><span style="
                    color: #5A646E;font-style: normal;
                    font-weight: 600;">Total tasks</span></div>
                  <div class="card-price">
                    <span style="
                    font-family: 'Tahoma';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 20px;
                    line-height: 20px;
                    color: #007BC2;">4
                    </span>
                  </div>
                </div>
                <div class="card-icon">
                  <img src="static/img/icons/Group 13.png" style="
                    width: 28px;
                    height: 28px;
                    background: #007BC2">
                </div>
              </div>
            </div>
          </div>
          <!--!Card no2-->
          <div class="col-income">
            <div class="card">
              <div class="card-body">
                <div class="card-text">
                  <div class="card-span"><span style="color: #5A646E;
                    font-style: normal;
                    font-weight: 600;">Running Tasks</span></div>
                  <div class="card-price d-flex card-task"><span style="
                    font-family: 'Tahoma';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 20px;
                    color: #FCCD22;">1</span>
                    <div class="progress3">
                      <div class="progress-bar2"></div>
                    </div>
                  </div>
                </div>
                <div class="card-icon">
                  <img src="static/img/icons/Group 14.png" style="
                    width: 28px;
                    height: 28px;
                    background: #FCCD22">
                </div>
              </div>
            </div>
          </div>
          <!--!Card no3-->
          <div class="col-income">
            <div class="card">
              <div class="card-body">
                <div class="card-text">
                  <div class="card-span"><span style="color: #5A646E;font-style: normal;
                    font-weight: 600;">Failed Tasks</span></div>
                  <div class="card-price d-flex card-task">
                    <span style="
                      font-family: 'Tahoma';
                      font-style: normal;
                      font-weight: 700;
                      font-size: 20px;
                      color: #E5004A;">0</span>
                    <div class="progress3">
                      <div class="progress-bar3"></div>
                    </div>
                  </div>
                </div>
                <div class="card-icon">
                  <img src="static/img/icons/Group 15.png" style="
                    width: 28px;
                    height: 28px;
                    background: #E5004A">
                </div>
              </div>
            </div>
          </div>
          <!--!Card no4-->
          <div class="col-income">
            <div class="card">
              <div class="card-body">
                <div class="card-text">
                  <div class="card-span"><span style="color: #5A646E;font-style: normal;
                    font-weight: 600;">Successful Tasks</span></div>
                  <div class="card-price d-flex card-task">
                    <span style="
                      font-family: 'Tahoma';
                      font-style: normal;
                      font-weight: 700;
                      font-size: 20px;
                      color: #039C7D;">3</span>
                    <div class="progress3">
                      <div class="progress-bar4"></div>
                    </div>
                  </div>
                </div>
                <div class="card-icon">
                  <img src="static/img/icons/Group 16.png" style="
                    width: 28px;
                    height: 28px;
                    background: #039C7D">
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--!Projects and color rows-->
        <div class="projects-row row">
          <!--!project and to do list-->
          <div class="project-todol">
            <!--project-->
            <div class="project-first row2-bgEdit">
              <!--!head-->
              <div class="project-head earning-header d-flex justify-between">
                <h6 class="earning-header-text" style="color: #5A646E;">Pipelines</h6>
              </div>
              <!--!body-->
              <div class="project-body">
                <!--!progress-bar 1-->
                <div class="project-progress pr-prog-bar3 d-flex flex-direction-column">
                  <div class="progress-top d-flex justify-between">
                    <h6>docker.io/hvac</h6>
                    <h6>60%</h6>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-percent progress-percent3"></div>
                  </div>
                </div>
                <!--!progress-bar 2-->
                <div class="project-progress pr-prog-bar4 d-flex flex-direction-column">
                  <div class="progress-top d-flex justify-between">
                    <h6>docker.io/seat</h6>
                    <h6>Complete!</h6>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-percent progress-percent5"></div>
                  </div>
                </div>
                <!--!progress-bar 3-->
                <div class="project-progress pr-prog-bar5 d-flex flex-direction-column">
                  <div class="progress-top d-flex justify-between">
                    <h6>docker.io/fdbus</h6>
                    <h6>Complete!</h6>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-percent progress-percent5"></div>
                  </div>
                </div>
                <!--!progress-bar 4-->
                <div class="project-progress pr-prog-bar5 d-flex flex-direction-column">
                  <div class="progress-top d-flex justify-between">
                    <h6>docker.io/velocitas-app</h6>
                    <h6>Complete!</h6>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-percent progress-percent5"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--!Earning Row starts here-->
        <div class="overview-row row d-flex">
          <!--First-->
          <div class="Pipeline Tasks">
            <div class="earning-container row2-bgEdit">
              <!--head of earning chart-->
              <div class="earning-header d-flex justify-between">
                <h6 class="earning-header-text">Pipeline Tasks Overview</h6>
                <!-- <button class="button-nobg" type="button"><i class="fas fa-ellipsis-v "></i></button> -->
              </div>
              <!--body of earning chart-->
              <div id="container-line" style=" width: 650px; height: 356.46px; margin: 0; padding: 0;">
                <!-- <img src="static/img/dashboard1.png" alt="Earning img"> -->
              </div>
            </div>
          </div>
          <div class="revenue">
            <div class="revenue-container row2-bgEdit">
              <!--head of earning chart-->
              <div class="revenue-header d-flex justify-between">
                <h6 class="revenue-header-text">Task status chart</h6>
                <!-- <button class="button-nobg" type="button"><i class="fas fa-ellipsis-v "></i></button> -->
              </div>
              <!--body of task pie chart-->
              <div id="container-pie" style="width: 300px; height: 354.46px; margin: 0; padding: 0;">
                <!-- <img src="static/img/pie.png" alt="Pie img"> -->
              </div>
              <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
            </div>
          </div>
        </div>
        
        <div class="footer">
          <footer>
            <span>Copyright © SDVOS 2022</span>
          </footer>
        </div>
      </div>

    </div>
    <a class="page-up-fixed" href="#page-top"><i class="fas fa-angle-up"></i></a>
  </div>
  
  <script type="text/javascript">
    var chartDom = document.getElementById('container-line');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: 'Total Deployed Tasks for daily',
        fontWeight: 400,
        left: 'center',
        top: '10px'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      series: [
        {
          data: [3, 3, 4, 0, 0, 0, 0],
          type: 'line',
          smooth: true
        }
      ]
    };

    option && myChart.setOption(option);
  </script>

  <script type="text/javascript">
    var dom = document.getElementById('container-pie');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var colorPalette = ['#00b04f', '#ffbf00', '#ff0000'];
    var option;

    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Task Status',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          color: colorPalette,
          data: [
            { value: 3, name: 'Success'},
            { value: 1, name: 'Running' },
            { value: 0, name: 'failed' },
          ]
        }
      ],
      graph: {
        color : colorPalette
      }
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>